<template>
	<div class="letter_detail_container">
		<h1>{{ letterDetail.title }}</h1>
		<p class="info">
			<span>{{ letterDetail.updateTime }}</span>
		</p>
		<div class="content" v-html="letterDetail.content"></div>
	</div>
</template>

<script>
import { noticeDetail } from '@/api/front/sysNotice';
export default {
	data() {
		return {
			visible: this.value,
			letterDetail: {}
		};
	},
	computed: {
		letterId() {
			return this.$route.params.id || '';
		}
	},
	mounted() {
		this.getNoticeDetail();
	},
	methods: {
		async getNoticeDetail() {
			let result = await noticeDetail(this.letterId).then((res) => res.data);
			if (result.code === '0') {
				this.letterDetail = this.$detailData(result.data);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.letter_detail_container {
	padding: 24px;
	h1 {
		color: #303133;
		font-size: 24px;
		line-height: 1.75;
		text-align: center;
		margin-bottom: 10px;
	}
	p.info {
		color: #909399;
		font-size: 14px;
		text-align: center;
		span {
			margin: 0 10px;
		}
	}
	.content {
		font-size: 16px;
		line-height: 1.5;
		padding: 16px 0;
		color: #606266;
		margin-top: 16px;
		word-break: break-all;
		white-space: pre-wrap;
		border-top: 1px solid #e4e7ed;
	}
}
</style>
